<template>
    <div class="process-flow-container">
        <el-card class="search-card">
            <div class="button-group">
                <el-button type="primary" @click="handleAdd()">
                    <el-icon><Plus /></el-icon>新增
                </el-button>
                <!-- 高级查询按钮 -->
                <el-button class="search-btn" type="primary" @click="openAdvancedSearch">
                    <el-icon><Search /></el-icon>高级查询
                </el-button>
            </div>
        </el-card>

        <!-- 高级查询弹窗 -->
        <el-dialog title="高级查询" v-model="advancedSearchVisible" width="600px" class="search-dialog">
            <el-form :model="searchForm" label-width="100px">
                <!-- 工艺流程编号 -->
                <el-form-item label="工艺流程编号">
                    <el-input v-model="searchForm.flowCode" placeholder="请输入" />
                </el-form-item>

                <!-- 工艺流程名称 -->
                <el-form-item label="工艺流程名称">
                    <el-input v-model="searchForm.flowName" placeholder="请输入" />
                </el-form-item>

                <!-- 负责人（动态下拉） -->
                <el-form-item label="负责人">
                    <el-select v-model="searchForm.personId" placeholder="请选择负责人" clearable>
                        <el-option
                            v-for="item in accountNames"
                            :key="item.id"
                            :label="item.realName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <!-- 所属部门（动态下拉） -->
                <el-form-item label="所属部门">
                    <el-select v-model="searchForm.departmentId" placeholder="请选择部门" clearable>
                        <el-option
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.departmentName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <!-- 状态 -->
                <el-form-item label="状态">
                    <el-select v-model="searchForm.isActive" placeholder="请选择状态" clearable>
                        <el-option label="启用" value="true" />
                        <el-option label="禁用" value="false" />
                    </el-select>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetSearchForm">清空</el-button>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="advancedSearchVisible = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>

        <el-card class="table-card">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column fixed type="index" label="序号" width="60" align="center" />
                <el-table-column prop="flowCode" label="流程编码" width="150" />
                <el-table-column prop="flowName" label="流程名称" width="180" />
                <el-table-column prop="processCount" label="工序数量" width="100" align="center" />
                <el-table-column prop="personName" label="负责人姓名" width="120" />
                <el-table-column prop="departmentName" label="部门姓名" width="120" />
                <el-table-column prop="isActive" label="是否启用" width="100" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.isActive ? 'success' : 'info'">
                            {{ scope.row.isActive ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remarks" label="备注" min-width="150" />
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="delflow(scope.row)">删除</el-button>
                        <el-button link type="primary" size="small" @click="viewFlow(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 工艺流程详情弹窗 -->
        <el-dialog title="工艺流程详情" v-model="detailVisible" width="800px" class="detail-dialog">
            <div class="detail-content">
                <!-- 基础信息 -->
                <el-card class="info-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>基础信息</span>
                        </div>
                    </template>
                    <div class="basic-info">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="info-row">
                                    <span class="label">工艺流程编号：</span>
                                    <span class="value">{{ detailData.flowCode }}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="info-row">
                                    <span class="label">工艺流程名称：</span>
                                    <span class="value">{{ detailData.flowName }}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="info-row">
                                    <span class="label">所属部门：</span>
                                    <span class="value">{{ detailData.departmentName }}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="info-row">
                                    <span class="label">负责人：</span>
                                    <span class="value">{{ detailData.personName }}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="info-row">
                                    <span class="label">状态：</span>
                                    <span class="value">
                                        <el-tag :type="detailData.isActive ? 'success' : 'info'">
                                            {{ detailData.isActive ? '启用' : '禁用' }}
                                        </el-tag>
                                    </span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="info-row">
                                    <span class="label">备注：</span>
                                    <span class="value">{{ detailData.remarks }}</span>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <!-- 加工工序 -->
                <el-card class="process-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>加工工序</span>
                        </div>
                    </template>
                    <el-table :data="detailData.processes" style="width: 100%" border>
                        <el-table-column prop="processCode" label="工序编码" width="120" />
                        <el-table-column prop="processName" label="工序名称" width="200" />
                        <el-table-column prop="personName" label="负责人" width="120" />
                        <el-table-column prop="departmentName" label="所属部门" width="120" />
                        <el-table-column prop="remarks" label="备注" min-width="150" />
                    </el-table>
                </el-card>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="detailVisible = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';

// 查看工艺流程详情
const viewFlow = (row: any) => {
  const flowId = row.id;
  axios.get(`/api/ProcessFlow/CheckProcessFlows`, {
    params: { FlowId: flowId }
  }).then((res) => {
    if (res.data.code === 200) {
      const data = res.data.data;
      // 设置弹窗数据
      detailData.value = {
        flowCode: data.flowCode,
        flowName: data.flowName,
        departmentName: data.departmentName,
        personName: data.personName,
        isActive: data.isActive,
        remarks: data.remarks,
        processes: data.processes || []
      };
      detailVisible.value = true;
    } else {
      ElMessage.error(res.data.message);
    }
  }).catch(err => {
    ElMessage.error('请求失败');
  });
};
// 详情弹窗控制
const detailVisible = ref(false);

// 详情数据
const detailData = ref({
  flowCode: '',
  flowName: '',
  departmentName: '',
  personName: '',
  isActive: '',
  remarks: '',
  processes: [] as Array<{
    processCode: string;
    processName: string;
    personName: string;
    departmentName: string;
    remarks: string;
  }>
});



const delflow=(row:any)=>{
  ElMessageBox.confirm(
    '确定要删除工序分类吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(()=>{
    axios.delete("/api/ProcessFlow/DelProcessFlows",{params:{Id:row.id}}).then((res)=>{
    if(res.data.code===200){
      ElMessage.success("删除成功")
      gettableData()
    }else{
      ElMessage.error(res.data.message)
    }
  })
  })

}

//跳转流程新增页面
const handleAdd = () => {
    router.push('/addProcessFlow');
}
const searchForm = ref({
  flowCode: '',
  flowName: '',
  personId: null,
  departmentId: null,
  isActive: null
});
const resetSearchForm = () => {
  searchForm.value = {
    flowCode: '',
    flowName: '',
    personId: null,
    departmentId: null,
    isActive: null
  };
};

const handleSearch = () => {
  // 将 searchForm 数据赋值给 page 对象进行请求
  Object.assign(page.value, {
  FlowCode: searchForm.value.flowCode,
  FlowName: searchForm.value.flowName,
  PersonId: searchForm.value.personId,
  DepartmentId: searchForm.value.departmentId,
  IsActive: searchForm.value.isActive
});
  
  gettableData(); // 重新加载表格数据
};



const advancedSearchVisible = ref(false);
// 打开高级查询弹窗
const openAdvancedSearch = () => {
    advancedSearchVisible.value = true;
};

// 工序分类下拉选项（可从接口获取）
const categoryOptions = ref([
  {
    id:null,
    categoryName:''
  }
]);

//负责人数据源
const accountNames=ref([{
    id:null,
    realName:''
}])
// 获取负责人数据
const fetchPersons = () => {
  axios.get('/api/Accounts/ClientGet')
    .then(res => {
      accountNames.value = res.data.totalPage;
    });
};

const departments=ref([{
    id:null,
    departmentName:''
}])

// 获取部门数据
const fetchDepartments = () => {
  axios.get('/api/Accounts/GetDepartments')
    .then(res => {
      departments.value = res.data.data;
    });
};





const tableData =ref([{
      "id": null,
      "flowCode": "",
      "flowName": "",
      "processCount": null,
      "personId": null,
      "personName": null,
      "departmentId": null,
      "departmentName": null,
      "isActive": null,
      "remarks": ""
}])
const page=ref({
    FlowCode:'',
    FlowName:'',
    PersonId:null,
    DepartmentId:null,
    IsActive:null,
    PageIndex:1,
    PageSize:10,
    TotalCount:0
})
const gettableData=()=>{
    axios.get('/api/ProcessFlow/GetProcessFlows', { params: page.value }).then((response) => {
       tableData.value = response.data.totalPage;
       page.value.TotalCount = response.data.totalCount;
    });
}
onMounted(() => {
    gettableData()
    fetchPersons();
    fetchDepartments();
});
</script>
<style scoped>
.process-flow-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-btn {
  margin-left: auto;
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.detail-content {
  padding: 0;
}

.info-card, .process-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}

.basic-info {
  padding: 20px;
}

.info-row {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.label {
  width: 120px;
  font-weight: bold;
  color: #606266;
}

.value {
  flex: 1;
  color: #303133;
}

.dialog-footer {
  text-align: right;
  padding: 10px 20px;
}

.search-dialog .el-form {
  padding: 20px;
}

.detail-dialog .el-dialog__body {
  padding: 10px 20px 20px;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  font-weight: bold;
}
</style>